import React, { Component } from 'react';

import { Form, Input, Button, Row, Col, message } from 'antd';
import { connect } from 'dva';
import { password as passwordReg } from '@/utils/regexp';
import SparkMD5 from 'spark-md5';
const FormItem = Form.Item;

@Form.create()
@connect(({ loading }) => ({
  loading: loading.effects['editPassword/sendEditPassword'],
}))
class EditPassword extends Component {
  state = {
    confirmDirty: false,
  };
  handleSubmit = e => {
    e.preventDefault();
    const { form, dispatch, changeStatus } = this.props;
    console.log(this.props);
    form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        const password = {};
        password.oldPassword = SparkMD5.hash(values.oldPassword);
        password.newPassword = values.confirm;
        dispatch({
          type: 'editPassword/sendEditPassword',
          payload: password,
        })
          .then(msg => {
            changeStatus(true);
          })
          .catch(errMsg => {
            message.error(errMsg);
          });
      }
    });
  };
  handleConfirmBlur = e => {
    const value = e.target.value;
    this.setState({ confirmDirty: this.state.confirmDirty || !!value });
  };
  compareToFirstPassword = (rule, value, callback) => {
    const form = this.props.form;
    if (value && value !== form.getFieldValue('password')) {
      callback('两次密码输入不一致!');
    } else {
      callback();
    }
  };

  validateToNextPassword = (rule, value, callback) => {
    const form = this.props.form;
    if (value && this.state.confirmDirty) {
      form.validateFields(['confirm'], { force: true });
    }
    callback();
  };
  render() {
    const {
      form: { getFieldDecorator },
      loading,
    } = this.props;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 },
      },
    };
    return (
      <Form onSubmit={this.handleSubmit}>
        <Row>
          <Col span={8}>
            <FormItem label="旧密码" {...formItemLayout}>
              {getFieldDecorator('oldPassword', {
                rules: [
                  {
                    required: true,
                    message: '密码包括6-16位大小写字母数字',
                    pattern: passwordReg,
                  },
                  {
                    validator: this.validateToNextPassword,
                  },
                ],
              })(<Input type="password" />)}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={8}>
            <FormItem label="新密码" {...formItemLayout}>
              {getFieldDecorator('password', {
                rules: [
                  {
                    required: true,
                    message: '密码包括6-16位大小写字母数字',
                    pattern: passwordReg,
                  },
                ],
              })(<Input type="password" />)}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={8}>
            <FormItem label="确认密码" {...formItemLayout}>
              {getFieldDecorator('confirm', {
                rules: [
                  {
                    required: true,
                    message: '密码包括6-16位大小写字母数字',
                    pattern: passwordReg,
                  },
                  {
                    validator: this.compareToFirstPassword,
                  },
                ],
              })(<Input type="password" onBlur={this.handleConfirmBlur} />)}
            </FormItem>
          </Col>
        </Row>

        <Row>
          <Col span={8} offset={2}>
            <Button type="primary" htmlType="submit" disabled={loading}>
              {loading ? '请稍后' : '下一步'}
            </Button>
          </Col>
        </Row>
      </Form>
    );
  }
}
export default EditPassword;
